<style scoped>
.user >>> .el-form-item {
  margin-bottom: 22px !important;
}
</style>
<template>
  <div class="user">
    <!-- 这是title -->
    <ywg-title></ywg-title>
    <!-- 这是表单 -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column align="center" prop="_id" label="用户id" wid th="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="username"
        label="用户名"
        width="180"
      >
      </el-table-column>
      <el-table-column align="center" prop="password" label="用户密码">
      </el-table-column>
      <el-table-column align="center" prop="isAdmin" label="权限编辑">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isAdmin"
            active-text="管理员"
            inactive-text="普通用户"
            @change="aaa(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="isAdmin" label="编辑">
        <template slot-scope="scope">
          <el-button @click="bianji(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="deleteRow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 这是分页器 -->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10]"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 这是弹框 -->
    <el-dialog
      v-loading="loading"
      title="编辑信息"
      width="370px"
      top="30vh"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" :rules="rules2" ref="ruleForm2">
        <el-form-item label="用户名ID" prop="id" :label-width="formLabelWidth">
          <el-input
            v-model="form.id"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="name" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            :placeholder="old.user"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="pwd"
          clearable
          :placeholder="old.pwd"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.pwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBut">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ywgTitle from "../admin/common/title";
export default {
  components: {
    ywgTitle,
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      value1: false,
      loading: false,

      dialogFormVisible: false, // 弹框按钮
      formLabelWidth: "120px",
      form: {
        id: "",
        name: "",
        pwd: "",
      },
      old: {
        user: "",
        pwd: "",
      },
      rules2: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 16, message: "长度在 3 到 16 个字符", trigger: "blur" },
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {
    this.update();
  },
  watch: {
    // 如果弹框关闭、则清除数据处理
    dialogFormVisible(val) {
      if (!val) {
        this.old = { user: "", pwd: "" };
        this.form = { name: "", pwd: "" };
        this.$refs.ruleForm2.resetFields();
      }
    },
  },
  methods: {
    // 删除
    deleteRow(obj) {
      this.$confirm("此操作将永久删除该用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post("/user/delete", { id: obj._id }).then((data) => {
            if (data.data.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "warning",
                message: data.data.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 提交弹框
    submitBut() {
      this.loading = true;
      // 提交逻辑
      let { id, name, pwd } = this.form;
      this.$http
        .post("/user/update", {
          id,
          username: name,
          pwd,
        })
        .then((data) => {
          console.log(data);
          if (data.data.code == 0) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.update();
          } else {
            this.$message({
              message: data.data.msg,
              type: "warning",
            });
            this.loading = false;
          }
        });
    },
    // 点击编辑
    bianji(obj) {
      this.old = { user: obj.username, pwd: obj.password };
      this.form.name = obj.username;
      this.form.id = obj._id;
      this.dialogFormVisible = true;
    },
    // 修改权限
    aaa(obj) {
      this.loading = true;
      let id = obj._id;
      let jurisdiction = obj.isAdmin ? 1 : 0;
      this.$http.post("/user/user/admin", { id, jurisdiction }).then((data) => {
        if (data.data.code == 0) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
        } else {
          this.$message.error(data.data.msg);
        }
        this.loading = false;
      });
    },
    handleClick(val) {
      console.log(val);
    },
    // 获取当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.update();
    },
    update() {
      this.loading = true;
      this.$http
        .get("/user/userList", {
          params: {
            currentpage: this.currentPage,
          },
        })
        .then((data) => {
          if (data.data.code == 0) {
            this.tableData = data.data.list;
            this.total = data.data.count;
          }
          this.loading = false;
        });
    },
  },
};
</script>